import React, { useState } from 'react';
import { Form, Input, Modal, Image, Upload,Button,message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
const { Dragger } = Upload;
import styles from '../index.less';
import { useModel } from 'umi';
const FormItem = Form.Item;

export interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  onFinish: () => void;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onCancel, onFinish} = props;
  const { initialState } = useModel('@@initialState');
  const {currentUser} = initialState || {};

  const [form] = Form.useForm();

  
  const [loading, setLoading] = useState<boolean>(false);
 


  const beforeUpload = (file: any) => {
    const isJpgOrPng =  ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/vnd.ms-excel'].includes( file.type );
    if (!isJpgOrPng) {
      message.error('只能上传excel文件!');
    }
    return isJpgOrPng ;
  }

  const handleChange = (info: any) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
   
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      const count = info.file.response.data
      console.log(count)
      message.success(`成功导入${count}条数据`);
      onFinish();
     
    }
  };

  return (
    <Modal
      width={800}
      footer={null}
      destroyOnClose
      title="批量导入"
      className={styles.deviceform}
      visible={modalVisible}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
     
      >
    
        <FormItem
          label="导入模板示例"
        >
          <Image
              width={470}
              src={ require('@/assets/deviceImport.png')}
            />
          <a style={{float: 'right'}}   key="download"
            href={`http://${currentUser.serverUrl}/attachments/download/adcfb048-e749-4c1a-92cf-4c247d88567b` }
          >
          下载
          </a>
        </FormItem>
      
        <FormItem
          label="上传"
          name="picCode"
      
        >
        <Dragger
                name="file"
                // listType="picture-card"
                // showUploadList={false}
                maxCount={1}
                className={styles.uploader}
               // headers={{ 'x-auth-token': getToken() }}
                action="/api/device/batchImport"
                beforeUpload={beforeUpload}
                onChange={handleChange}
              >
               <p className="ant-upload-drag-icon">
                <InboxOutlined  />
              </p>
              <p className="ant-upload-text">单击或拖动文件到此区域</p>
   
              </Dragger>

        </FormItem>
      </Form>

    </Modal>
  );
};

export default CreateForm;
